
<template>
  <div class="one">
  <div class="top">
    <img src="../assets/9e9a410c9483115b59ffd07a14de5f9.png" alt="111">

  </div>
  <div class="btm">
    <!-- 登录注册按钮切换 -->
    <div class="qiehuan">
      <div class="qiehuanone">
        <img src="../assets/2269b47fca5a4af73ddfcff1606e390.png" alt="">
      </div>
    </div>
    <!-- 表单输入框 -->
    <div>
      <van-form @submit="onSubmit">
        <van-field
    v-model="username"
    name="用户名"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
   class="biaodanone"
  />
    <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
    class="biaodantwo"
  />
  <div class="btomm">
    <!-- 30天内免登录or忘记密码 -->
    <div class="btommone" >
      <van-radio name="1" v-model="radio" style="width:150px">30天内免登录</van-radio>
    </div>

    <div class="btommtwo">
      忘记密码?
    </div>
  </div>

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="DenLu">登录</van-button>
  </div>
      </van-form>
    </div>
    <!-- 第三方登录 -->
    <div class="weiwei2">
      <div>第三方登录</div>
      <div class="wewweione">

<img   src="../assets/e1dde3547551c994291985750b21998.png" alt="">
      </div>

    </div>
    <!-- 用户协议 -->
     <div class="bomdi">
      <!-- <Button></Button> -->
      <div class="bomdione"><img src="../assets/07ac86868af6f255d95f5b944e5cfe8.png" alt=""></div>
      我们更新了<a href="#">《用户协议》</a>
     </div>
    <!-- <div class="dibu">
  <p>第三方登录</p>
  <div class="wenxinlogo">微信</div>
  <div class="tiaojian">

   <div class="pit">
    <img  src="../assets/07ac86868af6f255d95f5b944e5cfe8.png" alt="">
   </div>

<div>墩墩用户协议</div>
  </div>
</div> -->
  </div>

  </div>
</template>
<script>

export default {
  name: '',
  data () {
    return {
      username: '',
      password: '',
      radio: '0'
    }
  },
  methods: {
    onSubmit (values) {
      // console.log(123123)
    },
    DenLu () {
      // console.log('维维')
      if (this.username !== '' && this.password !== '') {
        console.log('维维22222')
        this.$router.push('/jiaose')
      }
    }
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  border-top:1px solid transparent

}
.one{
  width: 100%;
  height: 667px;
  background-color: #29a8e3;
  // margin-right: px;
}
.top{
  width: 200px;
  height: 40px;
  // background-color: pink;
// padding-top: 120px;
// margin-top: 120px;
// margin: 120px auto;
margin: auto;
padding-top: 40px;
padding-bottom: 100px;

}
img{
  width: 100%;
}
.btm
{
width: 300px;
height: 420px;
border-radius: 5%;
  // margin-top: 220px;
  background-color: #fff;
  margin: auto;
};
.qiehuan{

  padding-top: 30px;
  margin-bottom: 28px;
  // padding-top: 25px;

  line-height: 10px;
  .qiehuanone{
    width: 110px;
    height: 40px;
  // background-color:pink;
  margin-left: 20px;
  border-radius: 1px solid rgb(17, 17, 17);

  }
}
.biaodanone{
  border-bottom: 1px solid rgb(201, 196, 196);
}
.biaodantwo{
  border-bottom: 1px solid rgb(201, 196, 196);

}
.btomm{
  display: flex;
  height: 35px;
  .btommone{
    font-size: 10px;
    padding-left: 15px;
    height: 20px;
  }
  .btommtwo{
margin-left: 25px;
padding-left: 30px;
color: #000;
font-size: 10px;

  }
}
.weiwei2{
  font-size: 13px;
  .wewweione{margin-bottom: 15px;
    padding-top: 9px;
  width: 38px;
  height: 38px;
  margin: auto;
// background-color: pink;
img{
  // width: 100%;
  height: 75%;
  margin-top: 15px;
}
  }
}
.bomdi{
  display: flex;
  padding-left: 25px;
  width:275px;
  font-size: 10px;
  height: 30px;
  line-height: 30px;
  background-color:#fcf9f7;
  overflow: hidden;
  margin-top: 25px;
  // padding-top: 20px;
.bomdione{
  width: 20px;
  height: 20px;
  // background-color:blue ;
  img{height: 80%;}
}
}
// .dibu{
//   margin-top: 300px;
// }
// .wenxinlogo{
//   margin-bottom: 1px;
// }
// .tiaojian{
//   display: flex;
//   width: 290px;
//   height: 30px;
//   background-color:#dfdedd;
//   border-radius: 4%;

// // padding-left: 15px;
// margin-left: 7px;
// margin-top: 9px;
// // bottom: 0px;
// overflow: hidden;
// .pit{
//   width: 30px;
//   height: 30px;
//   background-color: pink
//   ;
// }
// }
</style>
